{% extends 'journal/base.html' %}

{% load editorjs %}

{% block extra_head %}
<!-- 通用社交分享 Meta 标签 -->
<meta property="og:title" content="{{ post.title }}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ request.build_absolute_uri }}" />
<meta property="og:description" content="{{ post.content|editorjs|striptags|truncatechars:150 }}" />

<!-- 微信分享 Meta 标签 -->
<meta itemprop="name" content="{{ post.title }}" />
<meta itemprop="description" content="{{ post.content|editorjs|striptags|truncatechars:150 }}" />
<meta itemprop="url" content="{{ request.build_absolute_uri }}" />

<!-- 微博分享 Meta 标签 -->
<meta property="weibo:title" content="{{ post.title }}" />
<meta property="weibo:description" content="{{ post.content|editorjs|striptags|truncatechars:150 }}" />

<!-- Twitter Card Meta 标签 -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ post.title }}" />
<meta name="twitter:description" content="{{ post.content|editorjs|striptags|truncatechars:150 }}" />
<meta name="twitter:url" content="{{ request.build_absolute_uri }}" />

<!-- 如果文章有封面图片，可以添加图片 Meta -->
{% if post.cover_image %}
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}" />
<meta itemprop="image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}" />
<meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}" />
<meta property="weibo:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}" />
{% endif %}

<style>
    .share-buttons {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 5px;
        z-index: 1000;
        text-align: center;
    }

    /* 在移动设备上隐藏按钮 */
    @media (max-width: 768px) {
        .share-buttons {
            display: none;
        }
    }

    .action-button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: transform 0.3s;
        text-decoration: none;
        font-size: 24px;
        background-color: #666;
    }

    .action-button:hover {
        transform: scale(1.1);
        background-color: #888;
    }

    .share-button {
        transform: rotate(-45deg);
    }

    .share-button:hover {
        transform: scale(1.1) rotate(-45deg);
    }

    .action-text {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
        margin-bottom: 8px;
    }

    /* 打印样式 */
    @media print {
        /* 隐藏不需要打印的元素 */
        nav,
        footer,
        .share-buttons,
        .qr-popup,
        .htmx-indicator,
        form,
        button,
        a[href="#"],
        a[hx-post],
        .action-button {
            display: none !important;
        }

        span[class*="private"] {
            display: none !important;
        }

        /* 隐藏编辑、删除、点赞等操作按钮 */
        a[href*="modify"],
        a[href*="delete"],
        a[href*="like"],
        a[href*="cancel"] {
            display: none !important;
        }

        /* 隐藏评论相关内容 */
        section[class*="comment"] {
            display: none !important;
        }

        /* 隐藏文章标题中的额外信息 */
        h1 span,
        h1 small {
            display: none !important;
        }

        /* 移除文章容器的所有边距和背景 */
        article {
            margin: 0 !important;
            padding: 0 !important;
            background: none !important;
        }

        /* 确保文章内容清晰可读 */
        body {
            font-size: 12pt;
            line-height: 1.5;
            color: black;
            background: white;
        }
    }

    .share-text {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }

    .qr-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        text-align: center;
        min-width: 200px;
    }

    .qr-popup.show {
        display: block;
    }

    #qrcode {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #qrcode img {
        margin: 0 auto;
    }

    .qr-popup h3 {
        text-align: center;
        margin: 0 0 15px 0;
    }

    .qr-popup p {
        margin-top: 15px;
        color: #666;
        text-align: center;
    }

    .close-popup {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        color: #666;
    }
</style>
{% endblock extra_head %}

{% block title %}
{{ post.title }}{% if post.draft %} （草稿）{% endif %}{% if post.private %}（不公开） by {{ post.author.nickname|default:post.author.username }} - 步客旅行者{% endif %}
{% endblock %}

{% block header_title %}
<h1>{{ post.title }}{% if post.draft %} <span class="draft">（草稿）</span>{% endif %}{% if post.private %}<span class="private">（不公开）</span>{% endif %}</h1>
{% endblock %}

{% block main %}
<article>
    <section>
        {% with author_url=post.author.get_absolute_url %}
            {% if author_url %}
                <a href="{{ author_url }}">{{ post.author }}</a>
            {% else %}
                <span>{{ post.author }}</span>
            {% endif %}
        {% endwith %}
        {% if post.published_at %}
            <span>发布于 {{ post.published_at }}</span>
        {% endif %}
        {% if user == post.author %}
        <p>
            <a href="{% url 'modify_post' post.id %}">编辑</a>
            <a hx-post="{% url 'delete_post' post.id %}" 
                hx-confirm="确定要删除这篇文章吗？"
                hx-target="body"
                hx-swap="outerHTML"
                hx-push-url="true" href="/">删除</a>
        </p>
        {% endif %}
    </section>

    <section>
        {{ post.content | editorjs }}
    </section>

    <div class="share-buttons">
        <div>
            <a class="action-button share-button"
               onclick="showWechatQR()"
               title="手机扫码打开">
               ⤴
            </a>
            <span class="action-text">分享</span>
        </div>
        <div>
            <a class="action-button"
               onclick="window.print()"
               title="导出 PDF">
               ⎙
            </a>
            <span class="action-text">导出</span>
        </div>
    </div>

    <div id="qrPopup" class="qr-popup">
        <span class="close-popup" onclick="hideWechatQR()">×</span>
        <h3>手机扫码打开</h3>
        <div id="qrcode"></div>
        <p>用手机扫描二维码打开后即可分享</p>
    </div>

    <section>
        {% for tag in post.tags.all %}
            <span>{{ tag.name }}</span>
        {% endfor %}
    </section>

    <section>
        <span>浏览({{ post.view_times }})</span>
        <span>赞({{ post.likes.count }})</span>
        <span>评论({{ displayed_comments.count }})</span>
        {% if user.is_authenticated %}
            {% if i_liked %}
                <a hx-post="{% url 'cancel_like_post' %}"
                hx-vals='{"post_id": "{{ post.id }}"}'
                hx-swap="outerHTML"
                hx-target="body"
                href="#">
                    取消赞
                </a>
            {% else %}
                <a hx-post="{% url 'like_post' %}"
                hx-vals='{"post_id": "{{ post.id }}"}'
                hx-swap="outerHTML"
                hx-target="body"
                href="#">
                    点赞
                </a>
            {% endif %}
        {% endif %}
    </section>

    {% if displayed_comments.exists %}
    <section class="comment">
        <h2>评论</h2>
        {% for comment in displayed_comments %}
            <blockquote>
                <p>{{ comment.content }}</p>
                <footer>
                    {{ comment.author.nickname|default:comment.author.username }}
                </footer>
                <footer>
                    <cite>{{ comment.created_at|date:"Y-m-d H:i" }}</cite>
                </footer>
                <footer>
                    {% if user == comment.post.author %}
                    <a hx-post="{% url 'delete_comment' comment.id %}"
                       hx-confirm="确定要删除这条评论吗？"
                       hx-swap="outerHTML"
                       hx-target="body"
                       href="#"><small>删除</small></a>
                    
                    <a hx-post="{% url 'make_comment_display' comment.id %}"
                       hx-vals='{"display": "false"}'
                       hx-swap="outerHTML"
                       hx-target="body"
                       href="#"><small>取消公开</small></a>
                {% endif %}
                </footer>
            </blockquote>
        {% endfor %}
    </section>
    {% endif %}

    {% if user == post.author and not_displayed_comments %}
    <section class="comment">
        <h2>下面的评论只有你可以看到</h2>
            <div>
                {% for comment in not_displayed_comments %}
                    <blockquote>
                        <p>{{ comment.content }}</p>
                        <footer>
                            {{ comment.author.username }}
                        </footer>
                        <footer>
                            <cite>{{ comment.created_at|date:"Y-m-d H:i" }}</cite>
                        </footer>
                        <footer>
                            <a hx-post="{% url 'delete_comment' comment.id %}"
                               hx-confirm="确定要删除这条评论吗？"
                               hx-swap="outerHTML"
                               hx-target="body"
                               href="#"><small>删除</small></a>
                            <a hx-post="{% url 'make_comment_display' comment.id %}"
                               hx-vals='{"display": "true"}'
                               hx-swap="outerHTML"
                               hx-target="body"
                               href="#"><small>公开展示</small></a>
                        </footer>
                    </blockquote>
                {% endfor %}
            </div>
    </section>
    {% endif %}

    {% if user.is_authenticated and user != post.author and user_not_displayed_comments %}
    <section class="comment">
        <h2>你发表评论（等待作者公开）</h2>
        <div>
            {% for comment in user_not_displayed_comments %}
                <blockquote>
                    <p>{{ comment.content }}</p>
                    <footer>
                        {{ comment.author.nickname|default:comment.author.username }}
                    </footer>
                    <footer>
                        <cite>{{ comment.created_at|date:"Y-m-d H:i" }}</cite>
                    </footer>
                    <footer>
                        <a hx-post="{% url 'delete_comment' comment.id %}"
                            hx-confirm="确定删除这条评论吗？"
                            hx-swap="outerHTML"
                            hx-target="body"
                            href="#"><small>删除</small></a>
                    </footer>
                </blockquote>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="comment">
        <h2>发表评论</h2>
        
        {% if user.is_authenticated %}
            <form method="post" action="{% url 'write_comment' post.id %}">
                {% csrf_token %}
                <textarea name="content" required></textarea>
                <button type="submit">发表评论</button>
            </form>
        {% else %}
            <p>请<a href="{% url 'login' %}?next={{ request.path }}">登录</a>后发表评论</p>
        {% endif %}
    </section>

    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <script>
        function showWechatQR() {
            const popup = document.getElementById('qrPopup');
            popup.classList.add('show');
            
            // 清除已存在的二维码
            document.getElementById('qrcode').innerHTML = '';
            
            // 生成新的二维码
            new QRCode(document.getElementById('qrcode'), {
                text: window.location.href,
                width: 128,
                height: 128
            });
        }

        function hideWechatQR() {
            document.getElementById('qrPopup').classList.remove('show');
        }

        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                fetch(`{% url 'increment_view_count' post.id %}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                        'Content-Type': 'application/json',
                    },
                })
                .then(response => response.json())
                .then(data => {
                    console.log('浏览量已更新:', data.view_times);
                })
                .catch(error => {
                    console.error('更新浏览量失败:', error);
                });
            }, 5000);
        });
    </script>
</article>
{% endblock %}